<template>
    <div style="width: 100%">
        <!--  头部搜索和创建按钮区域-->
        <el-row :gutter="50">
            <!--    搜索区域列-->
            <el-col :span="7">
                <el-input
                    clearable
                    @clear="getProfessionData"
                    @input="getProfessionData"
                    placeholder="请输入专业类型名称"
                    v-model="professionalTypeName"
                    prefix-icon="el-icon-search"
                />
            </el-col>
            <!--    按钮区域列-->
            <el-col :span="4">
                <el-row>
                    <el-tooltip
                        effect="dark"
                        content="创建专业(作为班级的容器)"
                        placement="top"
                    >
                        <el-button
                            type="primary"
                            icon="el-icon-plus"
                            circle
                            @click="addDialogVisible = true"
                        />
                    </el-tooltip>
                </el-row>
            </el-col>
        </el-row>
        <!--  表格数据区域-->
        <el-table
            :data="tableData"
            border
            highlight-current-row
            stripe
            style="width: 100%"
            :row-style="rowStyle"
            :cell-style="cellStyle"
        >
            <el-table-column
                :key="table.prop"
                v-for="table in tableHeader"
                :label="table.label"
                :prop="table.prop"
                align="center"
                :width="table.width"
            />
            <el-table-column
                label="操作"
                align="center"
            >
                <!--        操作按钮区域的作用域插槽-->
                <template slot-scope="scope">
                    <el-tooltip
                        effect="dark"
                        content="编辑专业类型(可编辑专业名称)"
                        placement="top"
                    >
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            circle
                            @click="editDialogVisible1(scope.row)"
                        />
                    </el-tooltip>
                    <el-tooltip
                        effect="dark"
                        content="删除专业类型(同时删除绑定的专业的专业类型)"
                        placement="top"
                    >
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            circle
                            @click="deleteDialogVisible1(scope.row.professionalTypeId)"
                        />
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!--    分页器区域-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            background
        />
        <!--    添加专业对话框区域-->
        <el-dialog
            title="添加专业"
            :visible.sync="addDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <!--      对话框主体区域-->
            <el-form
                v-if="addDialogVisible"
                :model="addForm"
                :rules="addFormRules"
                ref="addFormRef"
                label-width="100px"
            >
                <el-form-item
                    label="专业名称"
                    prop="professionalTypeName"
                >
                    <el-input v-model="addForm.professionalTypeName"/>
                </el-form-item>
            </el-form>
            <!--      对话框底部区域-->
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="addProfession"
        >添加专业类型</el-button>
      </span>
        </el-dialog>
        <!--    修改专业名称对话框-->
        <el-dialog
            title="修改名称"
            :visible.sync="editDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <!--      对话框主体区域-->
            <el-form
                v-if="editDialogVisible"
                :model="editForm"
                :rules="editFormRules"
                ref="editFormRef"
                label-width="150px"
            >
                <el-form-item
                    label="新专业类型名称"
                    prop="professionalTypeName"
                >
                    <el-input v-model="editForm.professionalTypeName"/>
                </el-form-item>
            </el-form>
            <!--      对话框底部区域-->
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="editProfession"
        >修改名称</el-button>
      </span>
        </el-dialog>
        <!--    删除专业对话框-->
        <el-dialog
            title="删除专业类型"
            :visible.sync="deleteDialogVisible"
            width="50%"
            :close-on-click-modal="false"
        >
            <!--      对话框主体区域-->
            <span>确认删除吗?</span>
            <!--      对话框底部区域-->
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button
            type="primary"
            @click="deleteProfession"
        >删除专业类型</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'professionType',
        data () {
            return {
                /** 数据表格 */
                // 数据表格数据绑定
                page: {
                    current: 1,
                    limit: 5,
                    total: 0
                },
                // 数据表格数据
                tableData: [],
                // 总共多少条数据
                total: 0,
                tableHeader: [
                    { label: '专业类型名称', prop: 'professionalTypeName' },
                    { label: '专业数量', prop: 'professionNum' },
                    { label: '创建时间', prop: 'createTime' }
                ],
                professionalTypeName:'',
                /** 控制添加专业对话框的显示与隐藏 */
                addDialogVisible: false,
                /** 新增专业表单数据 */
                addForm: {
                    professionalTypeName: ''
                },
                /** 表单验证相关配置 */
                addFormRules: {
                    professionalTypeName: [
                        { required: true, message: '请输入专业类型名称', trigger: 'blur' },
                        { min: 3, max: 21, message: '长度在 3 到 21 个字符', trigger: 'blur' }
                    ]
                },
                /** 控制修改专业对话框的显示与隐藏 */
                editDialogVisible: false,
                /** 控制删除专业对话框的显示与隐藏 */
                deleteDialogVisible: false,
                deleteProId:'',
                // 用户当前操作的专业编号
                professionCode: '',
                /** 修改专业表单数据 */
                editForm: {
                    professionalTypeId :'',
                    professionalTypeName: ''
                },
                /** 表单验证相关配置 */
                editProfessionalTypeName:'',
                editFormRules: {
                    professionalTypeName: [
                        { required: true, message: '请输入专业类型名称', trigger: 'blur' },
                        { min: 3, max: 21, message: '长度在 3 到 21 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        /** 生命周期函数 */
        created () {
            // 这里是发起表格数据请求的位置
            this.getProfessionData()
        },
        /** 事件处理函数 */
        methods: {
            /** 添加专业操作 */
            addProfession () {
                let self = this;
                let professionalTypeName = self.addForm.professionalTypeName;
                self.$refs.addFormRef.validate(valid => {
                    if (valid) {
                        self.utils.sendReq({
                            queryUrl: "/professionalType/add",
                            req: {
                                method: 'post',
                                data: {
                                    'professionalTypeName': professionalTypeName
                                },
                                success: function (req) {
                                    if (req.data.code === 200) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'success',
                                            showClose: true,
                                            center: true
                                        })
                                        self.getProfessionData()
                                        self.addDialogVisible = false;
                                    }
                                    if (req.data.code === 400) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'error',
                                            showClose: true,
                                            center: true
                                        })
                                    }
                                },
                                error: function () {
                                    self.$message({
                                        message: '接口请求失败！',
                                        type: 'error',
                                        showClose: true,
                                        center: true
                                    })
                                }
                            }
                        })
                    }
                })
            },
            /** 修改专业操作 */
            editDialogVisible1 (data) {
                this.editForm = JSON.parse(JSON.stringify(data))
                this.editDialogVisible = true
            },
            editProfession () {
                let self = this
                let data = {}
                data.professionalTypeId = self.editForm.professionalTypeId;
                data.professionalTypeName = self.editForm.professionalTypeName;
                self.$refs.editFormRef.validate(valid => {
                    if (valid) {
                        this.utils.sendReq({
                            queryUrl: 'professionalType/update',
                            req: {
                                data: data,
                                method: 'post',
                                success: function (req) {
                                    if (req.data.code === 200) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'success',
                                            showClose: true,
                                            center: true
                                        })
                                        self.getProfessionData()
                                        self.editDialogVisible = false
                                    }
                                    if (req.data.code === 400) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'error',
                                            showClose: true,
                                            center: true
                                        })
                                    }
                                },
                                error: function () {
                                    self.$message({
                                        message: '接口请求失败！',
                                        type: 'error',
                                        showClose: true,
                                        center: true
                                    })
                                }
                            }
                        })
                    }
                })
            },
            /** 删除专业操作 */
            deleteDialogVisible1 (professionalTypeId) {
                this.deleteProId = professionalTypeId
                this.deleteDialogVisible = true
            },
            deleteProfession () {
                let self = this
                let proId = self.deleteProId;
                this.utils.sendReq({
                    queryUrl: `/professionalType/delete/${proId}`,
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.$message({
                                    message: req.data.msg,
                                    type: 'success',
                                    showClose: true,
                                    center: true
                                })
                                self.deleteDialogVisible = false
                                self.getProfessionData()
                            }
                            if (req.data.code === 400) {
                                self.$message({
                                    message: req.data.msg,
                                    type: 'error',
                                    showClose: true,
                                    center: true
                                })
                                self.deleteDialogVisible = false
                            }
                        },
                        error: function () {
                            self.$message({
                                message: '接口请求失败！',
                                type: 'error',
                                showClose: true,
                                center: true
                            })
                            self.deleteDialogVisible = false
                        }
                    }
                })
            },
            /** 获取专业管理页面的专业列表数据 */
            getProfessionData () {
                let self = this;
                let professionalTypeName = self.professionalTypeName;
                let current = self.page.current;
                let limit = self.page.limit;
                let professionalTypes = [];
                self.utils.sendReq({
                    queryUrl: '/professionalType/query?current='+current+'&limit='+limit+'&professionalTypeName='+professionalTypeName,
                    req:{
                        method:'get',
                        success:function (req) {
                            if (req.data.code === 200){
                                self.page.total = req.data.data.page.rows
                                for(let i in req.data.data.professionalTypes){
                                    professionalTypes.push(req.data.data.professionalTypes[i]);
                                }
                                self.tableData = professionalTypes
                            }
                        }
                    }
                })

            },
            /** 监听每页显示多少数据的改变 */
            handleSizeChange (newSize) {
                this.page.limit = newSize
                this.getProfessionData()
            },
            /** 监听页码的改变 */
            handleCurrentChange (newPage) {
                this.page.current = newPage
                this.getProfessionData()
            },
            rowStyle(){
                return 'height : 35px'
            },
            cellStyle(){
                return 'padding : 2px';
            }
        }
    }
</script>

<style lang="less" scoped>
    .input-select {
        width: 130px;
    }

    .el-table {
        align-items: center;
        margin-top: 25px;
    }

    .el-pagination {
        margin-top: 25px;
    }
</style>
